<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多流程切换页面</title>
    <style>
        /* 基础样式保持不变 */
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
        }

        /* 新增Tab样式 */
        .tabs {
            margin-bottom: 30px;
            border-bottom: 2px solid #ddd;
        }

        .tab-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .tab-item {
            padding: 12px 25px;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
            background: #f5f5f5;
            margin-right: 5px;
            transition: all 0.3s;
        }

        .tab-item.active {
            background: #4CAF50;
            color: white;
            position: relative;
            bottom: -2px;
        }

        /* 流程容器切换 */
        .process-container {
            display: none;
        }

        .process-container.active {
            display: block;
        }

        /* 原有流程图样式保持不变 */
        .process {
            position: relative;
            padding-left: 60px;
            margin: 40px 0;
        }

        .process::before {
            content: '';
            position: absolute;
            left: 30px;
            top: 20px;
            bottom: 20px;
            width: 2px;
            background: #4CAF50;
        }

        .step {
            position: relative;
            margin-bottom: 40px;
        }

        .step-node {
            position: absolute;
            left: -30px;
            width: 40px;
            height: 40px;
            background: #4CAF50;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .step-content {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: #f8f8f8;
        }

        .step-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .step-detail {
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <!-- 新增Tab导航 -->
    <nav class="tabs">
        <ul class="tab-list">
            <li class="tab-item active" onclick="switchTab(1)">开发流程</li>
            <li class="tab-item" onclick="switchTab(2)">测试流程</li>
        </ul>
    </nav>

    <!-- 原始流程 -->
    <div id="process1" class="process-container active">
        <h2>开发流程说明</h2>
        <div class="process">
            <!-- 原有步骤内容保持不变 -->
            <div class="step">
                <div class="step-node">1</div>
                <div class="step-content">
                    <div class="step-title">需求分析</div>
                    <div class="step-detail">
                        收集并确认用户需求，编写需求文档...
                    </div>
                </div>
            </div>
            <!-- 其他步骤... -->
        </div>
    </div>

    <!-- 新增测试流程 -->
    <div id="process2" class="process-container">
        <h2>测试流程说明</h2>
        <div class="process">
            <div class="step">
                <div class="step-node">1</div>
                <div class="step-content">
                    <div class="step-title">测试计划</div>
                    <div class="step-detail">
                        制定测试方案和测试用例...
                    </div>
                </div>
            </div>
            <!-- 其他测试步骤... -->
        </div>
    </div>

    <script>
        function switchTab(tabNumber) {
            // 切换Tab按钮状态
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');

            // 切换内容显示
            document.querySelectorAll('.process-container').forEach(container => {
                container.classList.remove('active');
            });
            document.getElementById(`process${tabNumber}`).classList.add('active');
        }
    </script>
</body>
</html>